<template>
    <div class="main-container">
        <!-- <global /> -->
        <div class="main-content">
            <div class="content-container">
                <div class="header">
                    <!-- 使用 img 标签插入静态图标，后续替换为实际图标路径 -->
                    <img 
                      src="../assets/images/返回.png" 
                      alt="返回图标" 
                      class="back-icon" 
                      @click="to('/courseManage')"
                    >
                    <el-input v-model="searchSid" placeholder="请输入学生学号" style="width: 200px; margin-right: 10px;" />
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </div>
                <!-- 评分弹窗 -->
                <el-dialog v-model="dialogVisible2" :title="text" width="40%">
                    <el-form :model="stugrade" label-width="100px">
                        <el-form-item label="课程编号">
                            <el-input v-model="stugrade.scgCid" placeholder="请输入课程编号" disabled/>
                        </el-form-item>
                        <el-form-item label="课程名称">
                            <el-input v-model="stugrade.scName" placeholder="请输入课程名称" disabled/>
                        </el-form-item>
                        <el-form-item label="课程考试分">
                            <el-input v-model="stugrade.scgGrade" placeholder="请输入课程考试分" />
                        </el-form-item>
                        <el-form-item label="课程表现分">
                            <el-input v-model="stugrade.scgPgrade" placeholder="请输入课程表现分" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="updataGrade">确定</el-button>
                    </template>
                </el-dialog>

                <!-- 成绩列表 -->
                <el-table :data="courseList.records" border style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="scCid" label="课程编号" />
                    <el-table-column prop="scName" label="课程名称" />
                    <el-table-column prop="scMajor" label="专业" />
                    <el-table-column prop="scGrade" label="年级" />
                    <el-table-column prop="scgGrade" label="成绩">
                        <template #default="{ row }">
                            <span :style="{ color: row.scgGrade < 60 ? 'red' : 'inherit' }">{{ row.scgGrade }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scgPgrade" label="平时分">
                        <template #default="{ row }">
                            <span :style="{ color: row.scgPgrade < 60 ? 'red' : 'inherit' }">{{ row.scgPgrade }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scgSemester" label="学期" />
                    <el-table-column prop="ssid" label="学生学号" />
                    <el-table-column prop="sname" label="学生姓名" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="seeThe(scope.row)">评分</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                        :total="courseList.total" class="pagination"  @current-change="handleSearch" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useRoute,useRouter } from 'vue-router';
import { reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import axios from '@/router/axios';
import {getSessionStorage} from '@/router/common'
export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            searchSid: '',
            dialogVisible: false,
            currentPage: 1,
            pageSize: 10,
            courseForm: {
                scCid: '',
                scName: '',
                scMajor: '',
                scGrade: '',
                scTid: '',
                scgSemester: ''
            },
            courseList: {
                total: 42,
                records: [
                    {
                        scName: '面向对象',
                        scMajor: '软件工程',
                        scGrade: 2022,
                        scCid: 'RG203',
                        scgGrade: 89,
                        scgPgrade: 88,
                        scgSemester: '2024年秋季学期',
                        ssid: '202213008407',
                        sname: '巨帅比'
                    }
                ]
            },
            dialogVisible2 : false,
            text : '',
            stugrade:{
                scgCid: '',
                scName:'',
                scgGrade: '',
                scgPgrade: '',
                scgSemester: '',
                scgSid: ''
            }
        });

        function seeThe(row){
            state.dialogVisible2 = true;
            state.text = '请为'+row.sname+'打分';
            state.stugrade.scgCid = row.scCid;
            state.stugrade.scName = row.scName;
            state.stugrade.scgGrade = row.scgGrade;
            state.stugrade.scgPgrade = row.scgPgrade;
            state.stugrade.scgSemester = row.scgSemester;
            state.stugrade.scgSid = row.ssid;
        }

        function updataGrade(){
            console.log(state.stugrade)
            axios.put('/api/teacher/tscgrades/upstugrade',state.stugrade).then(res => {
                const result = res.data;
                if(result.code == 1){
                    ElMessage.success('打分成功');
                    state.dialogVisible2 = false;
                    handleSearch();
                }else{
                    ElMessage.error(result.msg);
                }
            })
        }

        handleSearch();
        function handleSearch() {
            console.log(route.query)
            axios.get('/api/teacher/tscgrades/getstugrade',{
                params:{
                    page:state.currentPage,
                    pageSize:state.pageSize,
                    SSid:state.searchSid,
                    TTid:getSessionStorage('teacher').tTid,
                    CCid: route.query.courseId
                }
            }).then(res => {
                const result = res.data;
                if(result.code == 1){
                    state.courseList.records = result.data.records;
                    state.courseList.total = result.data.total;
                }
            })
        }

        function to(path) {
            router.push(path)
        }

        return {
            ...toRefs(state),
            handleSearch,
            seeThe,
            updataGrade,
            to
        };
    }
};
</script>

<style scoped>
.main-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.main-content {
    /* margin-left: 220px;
    margin-top: 60px;
    width: calc(100% - 220px);
    height: calc(100vh - 60px); */
    width: 100%;
    height: 100%;
    overflow: auto;
}

.content-container {
    padding: 20px;
    min-height: calc(100% - 40px);
}

.header {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}

.pagination {
    margin-right: 20px;
}
.back-icon {
  width: 30px; /* 调整图标宽度 */
  height: 30px; /* 调整图标高度 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  margin-right: 10px; /* 调整图标右侧边距 */
}
</style>
